<template>
  <el-select
      v-model="selectedValue"
      :placeholder="placeholder"
      :disabled="disabled"
      clearable
      @change="handleChange"
  >
    <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
    />
  </el-select>
</template>

<script setup>
import { listDictOptions } from "@/api/v-sys-service/sys-manage/dict/index.js";

const props = defineProps({
  /**
   * 字典类型编码(eg: 性别-gender)
   */
  typeCode: {
    type: String,
    required: true,
  },
  modelValue: {
    type: [String, Number],
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:modelValue"]); // 父组件监听事件，同步子组件值的变化给父组件

const options = ref([]); // 字典下拉数据源

const selectedValue = ref();

watch([options, () => props.modelValue], ([newOptions, newModelValue]) => {
  if (newOptions.length === 0) return; // 下拉数据源加载未完成不回显
  if (newModelValue === undefined) {
    selectedValue.value = undefined;
    return;
  }
  if (typeof newOptions[0].value === "number") {
    selectedValue.value = Number(newModelValue);
  } else if (typeof newOptions[0].value === "string") {
    selectedValue.value = String(newModelValue);
  } else {
    selectedValue.value = newModelValue;
  }
});

function handleChange(val) {
  emits("update:modelValue", val);
}

onBeforeMount(() => {
  // 根据字典类型编码(typeCode)获取字典选项
  listDictOptions(props.typeCode).then(({data}) => {
    options.value = data;
  });
});
</script>
